<template>
  <div class="content">
    <!-- 基础信息 -->
    <div class="content-info flex-row-start">
      <div class="content-info-img">
        <img :src="content.icon" alt="" width="220" height="220"/>
      </div>
      <div class="content-info-box flex-column-start">
        <span class="content-info-box-title">{{ content.name }}</span>
        <div class="content-info-box-jianjie">简介：{{ content.desc }}</div>
        <div class="content-info-box-price flex-row-start">
          <span>价格</span>
          <div class="flex-row-start" v-if="content.charge_type == 2">
            <span style="margin-left: 17px">￥</span>
            <span style="margin-left: 3px; color: #fb0000; font-size: 18px">{{
              content.fee
            }}</span>
            <span style="margin-left: 8px">元</span>
          </div>
          <div
            style="margin-left: 17px; color: #009944"
            v-else-if="content.charge_type == 1"
          >
            限时免费
          </div>
          <div
            style="margin-left: 17px; color: #009944"
            v-else-if="content.charge_type == 0"
          >
            免费
          </div>
        </div>
        <div
          class="content-info-box-validity flex-row-start"
          v-if="content.charge_type == 2"
        >
          <span class="content-info-box-validity-title">有效期</span>
          <div class="validity flex-row-start">
            <div
              class="validity-box"
              v-for="(item, index) in validityList"
              :key="index"
              :class="selectActive == index ? 'selectBox' : ''"
              @click="changeValidity(item, index)"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
        <div class="line"></div>
        <div class="order" v-if="!content.is_my_app" @click="order">
          立即订购
        </div>
        <div
          class="order"
          :class="content.status == 0 ? 'disBtn' : ''"
          v-else-if="content.is_my_app"
          @click="use"
        >
          立即使用
        </div>
      </div>
    </div>

    <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      :with-header="false"
      size="47%"
      :append-to-body="true"
      direction="rtl"
    >
      <div class="drawer_box">
        <!-- 返回 -->
        <div class="drawer_box-back">
          <svg-icon icon-class="back" @click="drawer = false"></svg-icon>
        </div>
        <!-- 内容 -->
        <div class="drawer_box-content">
          <el-steps :active="activeContent" align-center>
            <el-step title="" description="提交订单"></el-step>
            <el-step title="" description="支付订单"></el-step>
            <el-step title="" description="完成订单"></el-step>
          </el-steps>
        </div>

        <div v-if="activeContent == 0">
          <div class="drawer_box-order">
            <span class="drawer_box-order-title">订单信息</span>
            <div class="order_box">
              <div class="order_box-top">
                <span>应用信息</span>
                <span>订购量</span>
                <span>有效期</span>
                <span>服务商</span>
                <span>总价</span>
              </div>
              <div class="order_box-bottom">
                <div class="shopinfo flex-row-start">
                  <img :src="content.icon" alt="" />
                  <div class="shopinfo-box flex-column-start">
                    <span>{{ content.name }}</span>
                    <span style="margin-top: 7px">{{
                      content.charge_type == 0
                        ? "免费"
                        : content.charge_type == 1
                        ? "限时免费"
                        : "￥50000.00"
                    }}</span>
                  </div>
                </div>
                <span class="title">1</span>
                <span class="title">{{
                  content.charge_type == 0 || content.charge_type == 1
                    ? "永久"
                    : "1年"
                }}</span>
                <span class="title">菜东家</span>
                <span class="title">0</span>
              </div>
            </div>
          </div>
          <div class="drawer_box-order">
            <span class="drawer_box-order-title">服务授权</span>
            <div class="check">
              <el-checkbox v-model="checked"
                >我已充分阅读并理解《菜东家-平台接口数据订阅技术服务协议》记载条款，无异议并愿遵守相关约定</el-checkbox
              >
            </div>
          </div>

          <div class="positioning flex-row-end">
            <span>如您需要开具发票请联系在线客服</span>
            <span style="margin-left: 30px">实付款</span>
            <span
              style="
                font-size: 36px;
                font-family: PingFang SC;
                font-weight: bold;
                color: #ff8e14;
                margin-left: 22px;
              "
              >0</span
            >
            <div class="btn flex-center" @click="fukuan">同意并付款</div>
          </div>
        </div>
        <div v-else-if="activeContent == 1"></div>
        <div v-else-if="activeContent == 2"></div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import * as applicationApi from "@/api/kitchen/kitchen";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
export default {
  inject: ["closeDrawer", "openAll"],
  props: {
    content: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      validityList: [
        {
          id: 1,
          name: "1年",
        },
        {
          id: 2,
          name: "2年",
        },
        {
          id: 3,
          name: "3年",
        },
      ],
      selectActive: null,

      drawer: false,
      checked: false,
      // 点击订购时，展示订单详情，当为0时代表订单详情，当为1时代表订单付款二维码，当为2时代表付款完成
      activeContent: 0,
    };
  },
  methods: {
    changeValidity(item, index) {
      this.selectActive = index;
    },
    order() {
      // 当type为0时代表免费，直接将立即订购修改为立即使用即可
      // 反之则代表需付费，直接弹出模态框，提示无法订购
      if (this.content.charge_type == 0 || this.content.charge_type == 1) {
        this.drawer = true;
      } else {
        this.openAll();
      }
    },
    use() {
      if (this.content.status == 0) return;
      if (this.content.url == "/yongyouT") {
        this.$emit("openNativeDrawer", true);
      } else if (this.content.url == "/move") {
        this.$emit("openMoveDrawer", this.content);
      }
      this.$emit("closeDrawer", []);
    },
    fukuan() {
      if (this.content.charge_type == 0 || this.content.charge_type == 1) {
        if (!this.checked) {
          this.$message.error("请勾选服务授权后，再付款!");
          return;
        }
        let data = {
          id: this.content.id,
        };
        let query = this.packageApi(data);
        applicationApi.getDingGou(query).then((res) => {
          if (res.errcode == 0) {
            this.$message.success("订购成功!");
            this.content.order = false;
            this.drawer = false;
            this.$emit("closeDrawer", false);
            this.checked = false;
          } else {
            this.$message.error(res.errmsg);
          }
        });
        return;
      } else {
        this.activeContent = 1;
      }
    },

    // 封装请求的sign和timeStamp字段
    packageApi(data = {}) {
      let query = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        data
      );
      return query;
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  padding: 73px 18px 40px 30px;
  &-info {
    align-items: flex-start;
    &-img {
      width: 220px;
      height: 220px;
      min-width: 220px;
    }
    &-box {
      margin-left: 20px;
      width: calc(100% - 220px - 40px);
      &-title {
        font-size: 26px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
      }
      &-jianjie {
        width: 100%;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
        margin-top: 10px;
      }
      &-price {
        height: 60px;
        line-height: 60px;
        background: #f5f5f5;
        border-radius: 4px;
        width: 100%;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
        padding: 0 18px;
        margin-top: 35px;
        align-items: center;
      }
      &-validity {
        align-items: center;
        margin-top: 17px;
        &-title {
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #666666;
        }
        .validity {
          align-items: center;
          &-box {
            width: 61px;
            height: 32px;
            background: #ffffff;
            border: 1px solid #dcdcdc;
            text-align: center;
            line-height: 32px;
            border-radius: 4px;
            margin-left: 12px;
            margin-right: 7px;
            &:hover {
              cursor: pointer;
            }
          }
        }

        .selectBox {
          border: 1px solid #009944;
          position: relative;
          &::after {
            content: "";
            position: absolute;
            right: 0;
            top: 0;
            background-image: url("../image/select.png");
            width: 22px;
            height: 19px;
            background-size: 100% 100%;
            display: block;
          }
        }
      }

      .line {
        width: 100%;
        height: 1px;
        background: #dcdcdc;
        margin-top: 20px;
      }
      .order {
        width: 80px;
        height: 32px;
        background: #009944;
        border-radius: 4px;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ffffff;
        text-align: center;
        line-height: 32px;
        margin-top: 10px;
        &:hover {
          cursor: pointer;
        }
      }

      .disBtn {
        background: #999999 !important;
        &:hover {
          cursor: not-allowed;
        }
      }
    }
  }
}

.drawer_box {
  width: 100%;
  height: 100%;
  background: #ffffff;
  &-back {
    width: 100%;
    height: 70px;
    line-height: 70px;
    padding: 0 43px;
  }
  &-content {
    width: calc(100% - 75px);
    height: 180px;
    margin: 0 auto;
    background: #f7f8fa;
    border-radius: 10px;
    display: flex;
  }
  &-order {
    width: calc(100% - 75px);
    margin: 48px auto 0;
    &-title {
      font-size: 30px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
    }
    .order_box {
      width: 100%;
      height: 150px;
      background: #f7f8fa;
      border-radius: 10px;
      margin-top: 17px;
      &-top {
        display: grid;
        grid-template-columns: 250px repeat(4, 1fr);
        grid-template-rows: 50px;
        line-height: 50px;
        padding: 0 22px;
        border: 1px solid #e5e6eb;
        border-radius: 10px 10px 0px 0px;
      }
      &-bottom {
        display: grid;
        grid-template-columns: 250px repeat(4, 1fr);
        grid-template-rows: 100px !important;
        padding: 0 22px;
        .shopinfo {
          align-items: center;
          img {
            width: 80px;
            height: 80px;
            min-width: 80px;
          }
          &-box {
            margin-left: 11px;
          }
        }
        .title {
          line-height: 100px;
        }
      }
    }
    .check {
      margin-top: 20px;
    }
  }

  .positioning {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 80px;
    line-height: 80px;
    background: #ffffff;
    box-shadow: 0px 0px 10px 0px rgba(4, 0, 0, 0.1);
    z-index: 2003;
    align-items: center;
    padding: 0 38px;
    span {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
    }
    .btn {
      width: 120px;
      height: 40px;
      background: #009944;
      border-radius: 4px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #ffffff;
      margin-left: 16px;
      &:hover {
        cursor: pointer;
      }
    }
  }
}

/deep/.el-steps {
  align-items: center;
}

/deep/.el-steps--horizontal {
  width: 100%;
}

/deep/.el-step__main {
  margin-top: 21px;
}
/deep/.el-step__description {
  font-size: 20px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #808080;
  margin-top: 0;
}

/deep/.el-step__icon {
  width: 30px;
  height: 30px;
}
/deep/.is-process .el-step__icon {
  background: #009944;
  color: #fff;
  border-color: #009944;
}

/deep/.el-step__description.is-process {
  font-weight: bold;
  color: #333333;
}
</style>